<script setup>
import Slider from "../setting/Slider.vue";
import Color from "../setting/Color.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { left: 0, top: 0 },
  $size: { width: 270, height: 40 },
  $positionType: "absolute",
  $removeable: true,
  color: "#333333",
  scoreColor: "#EB4A73",
  fontSize: 14,
  scoreSize: 25,
  preText: "成绩",
  afterText: "分",
});

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});
</script>
<template>
  <el-form :model="detail" label-width="auto" :disabled="disabled">
    <Color v-model="detail.color" name="文字颜色" @change="onChange" />
    <Color v-model="detail.scoreColor" name="分数颜色" @change="onChange" />
    <Slider
      v-model="detail.fontSize"
      name="文字字号"
      :min="12"
      :max="35"
      @change="onChange"
    />
    <Slider
      v-model="detail.scoreSize"
      name="分数字号"
      :min="12"
      :max="35"
      @change="onChange"
    />
    <el-form-item label="描述文字:">
      <el-input
        v-model="detail.preText"
        style="width: 150px"
        @input="onChange"
      />
      ???
      <el-input
        v-model="detail.afterText"
        style="width: 150px"
        @input="onChange"
      />
    </el-form-item>
  </el-form>
</template>
